<head>
	<style>
		article {
			height: 1500px;
		}

		#dot {
			position: absolute;
			top: 900px;
		}

		footer {
			position: relative;
		}

		picture {
			height: 100px;
		}


	</style>
</head>
<body>
	<img src="/static/blank.gif" id="dot" />
	<article>
		<h1>Issue #494</h1>
		<img src="/static/mdn.png" width=250>
		<img src="/static/mdn.png?nocache=1" width=25 loading="lazy">
		Foo bar
	</article>

	<!-- footer is below the fold -->
	<footer>
		&copy; phantomas 2015
		<img src="/static/mdn.png" width=25><!-- the same image was above the fold - ignore -->
		<img src="%3D%3D"><!-- ignore base64-encoded images -->
		<img src="/static/example.svg" height="50" width="50">
		<img lzld-src="/static/lazyloaded.jpg" width=60 height=40 /><!-- ignore images with no source -->

		<!-- pick the right source in a picture tag -->
		<picture>
			<source srcset="/static/75x120.jpg" media="(max-width: 99999px)">
 			<img src="/static/75x50.jpg">
		</picture>

		<!-- pick the right source if a srcset is specified -->		
		<img src="/static/75x50.jpg" srcset="/static/75x50.jpg 75w, /static/150x100.jpg 150w" sizes="150px" width="150" height="100"/>

		<img src="/static/mdn.png?nocache=2" width=25 loading="lazy"><!-- native lazyloading - ignore -->
	</footer>
</body>
